<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<style>

</style>

<body>
  <div class="app">
    商品<input type="text" v-model="goods"><br>
    价格<input type="number" v-model="price"><br>
    数量<input type="number" v-model="n"><br>
    <button @click="add">添加到购物车</button>


    <ul>
      <li v-for="item in list">
        {{item.goods}}的数量是{{item.n}}个，单价为{{item.price}},总价格是{{(item.n*1)*(item.price*1)}}
      </li>

      <li>{{statistics}}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el: ".app",
      data() {
        return {
          goods: "",
          price: 0,
          n: 0,
          list: []
        }
      },
      methods: {
        add() {

          this.list.push({
            goods: this.goods,
            price: this.price,
            n: this.n,
          })
        }
      },
      computed: {
        statistics() {
          let n = 0, s = 0
          for (let item of this.list) {
            n += item.n * 1
            s += item.price * item.n
          }
          return `总数为${n} ------总价格为${s}`
        }
      }
    })
  </script>
</body>